<template>
  <div class="company-profile">
    <div class="position">
      <span>当前位置&gt;<a href="javascript:void(0);">企业概况</a></span>
    </div>
    <div class="profile">
      <subtitle zhTitle="企业简介" :lineSpace=10></subtitle>
      <p class="profile-p">浙江恒喆自动化设备有限公司,位于浙江省的政治、经济、文化、教育、交通和金融中心，长江三角洲城市群中心城市之一、环杭州湾核心城市、长三角宁杭生态经济带节点城市、中国重要的电子商务中心之一的浙江省省会杭州市,注册地址在浙江,杭州,杭州市西湖区三墩镇紫宣路279号汇禾领府5号楼211室,公司性质属于其他有限责任公司,注册资本为1000 万人民币,自2017-02-24成立,至今已经2年。</p>
    </div>
    <div class="honor">
      <subtitle zhTitle="企业荣誉" :lineSpace=10></subtitle>
      <div class="honor-list">
        <ul>
          <li v-for="(item,index) in 6">
            <img src="http://pic2.52pk.com/files/120815/1283314_162030_3708.jpg" alt="">
            <div class="honor-desc">精密仪器最大企业荣誉证书</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="culture">
      <subtitle zhTitle="企业文化" :lineSpace=10></subtitle>
      <div class="block-wrap">
        <div class="culture-block" v-for="(item,index) in cultureList">
          <div class="top">{{item.title}}</div>
          <div class="middle">{{item.subtitle}}</div>
          <div class="bottom">{{item.desc}}</div> 
        </div>
      </div>
    </div>
    <div class="culture Propaganda">
      <subtitle zhTitle="企业宣传" :lineSpace=10></subtitle>
      <div class="block-wrap">
        <div class="culture-block" v-for="(item,index) in cultureList">
          <div class="top">{{item.title}}</div>
          <div class="middle">{{item.subtitle}}</div>
          <div class="bottom">{{item.desc}}</div> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import subtitle from 'COMPS/subtitle.vue'
  export default {
    name: 'company-profile',
    components: {
      subtitle
    },
    data() {
      return {
        cultureList: [{
          title: '精益管理',
          subtitle: 'MANAGEMENT',
          desc: '一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求'
        },{
          title: '人文关怀',
          subtitle: 'HUMANITIES',
          desc: '一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求'
        },{
          title: '员工成长',
          subtitle: 'GROWING UP',
          desc: '一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求'
        },{
          title: '团队拓展',
          subtitle: 'TEAM GROWTH',
          desc: '一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求一切为满足顾客要求'
        }]
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .company-profile {
    text-align: center;
    .subtitle {
      margin-bottom: 50px;
      .zh-title {color: #333;font-size: 24px;}
    }
    .profile {
      margin-top: 50px;
      margin-bottom: 100px;
      .profile-p {
        text-align: left;
        width: 955px;
        margin: 0 auto;
        line-height: 42px;
        color: #333;
      }
    }
    .honor {
      margin-bottom: 40px;
      .honor-list {
        li {
          display: inline-block;
          height: 310px;
          width: 350px;
          margin-right: 70px;
          &:nth-of-type(3n) {
            margin-right: 0px;
          }
          >img {
            width: 100%;
          }
          .honor-desc {
            line-height: 60px;
            text-align: center;
            color: #333;
            background-color: #dff9ff;
          }
        }
      }
    }
    .culture {
      margin-bottom: 100px;
      .block-wrap {
        width: 100%;
        display: flex;
        .culture-block {
          flex: 1;
          box-sizing: border-box;
          text-align: center;
          width: 260px;
          height: 260px;
          margin-right: 45px;
          padding: 45px 30px 30px 30px;
          box-shadow: 0px 2px 6px 0px rgba(71, 190, 218, 0.35);
          &:nth-of-type(4n) {
            margin-right: 0px;
          }
          .top {
            font-size: 18px;
          }
          .middle {
            margin-top: 20px;
            margin-bottom: 35px;
          }
          .bottom {
            .Mult-line(4);
            line-height: 22px;
          }
          .middle,.bottom {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
</style>